<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-300 w-full">


    <div class="  w-4/5  bg-white   rounded-lg shadow-xl  ">
      <!--  -->


      <div class="  space-y-5 p-3">
        <h1 class=" uppercase   text-center">login</h1>
        <div class="flex flex-col space-y-5">
          <input placeholder="name" v-model="USERNAME_PASSWORD.username" />
          <input placeholder="password"  v-model="USERNAME_PASSWORD.password" />
        </div>
        <div class="flex  space-x-2  ">
          <button class="flex-1 py-3 bg-green-300 p-1 rounded-md" @click="Login">login</button>
          <button class="flex-1 py-3 bg-green-300  rounded-md "    @click="()=>{this.$router.push('/register')}"  >register</button>
        </div>
        <br>
        <a href="/" class="hover:text-green-300 ">回到首页</a>
      </div>

      <!--  -->
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Header from "../components/Header";


import VConsole from "vconsole";
const vConsole = new VConsole({ maxLogNumber: 1000 });
console.log('Hello world');



export default {
  name: "Login",
  components: {Header},
  data() {
    return {
      USERNAME_PASSWORD: {
        username: 'jack',
        password: '123321'
      },
    }
  },
  methods:{
    Login(){
      let __this = this
      axios.post('/login', __this.USERNAME_PASSWORD).then(resp => {
        console.log(resp)
        console.log(resp.data.code)
        if (resp.data.code === 200){
          const jwt = resp.headers['authorization']
          const userInfo = resp.data.data
          console.log("userInfo" )
          console.log(userInfo)

          // 把数据共享出去
          __this.$store.commit("SET_TOKEN", jwt)
          __this.$store.commit("SET_USERINFO", userInfo)

          // 获取
          console.log(__this.$store.getters.getUser)
          __this.$router.push("/")
        }else {
          alert("账户 or 密码错误...")
        }
      })
    }
  },
  created() {

  }
}
</script>

<style scoped>

</style>
